<template>
    <div class='tableHeader df'>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="报告期">
                <el-select v-model="form.region" placeholder="年报">
                    <el-option :label="item.name" :value="item.name" v-for="(item) in reportperiod" :key="item.id"
                        @click.native="report_click(item.name)">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <ul class="df time-scope ai-c">
            <div>时间范围</div>
            <!-- <li v-for="(item, index) in timeScope" :key="item.id"
                :class="index == time_scope_active ? 'li-active ' : ''" @click="time_scope_click(index)">{{ item.name
                }}</li> -->

            <el-button v-for="(item, index) in timeScope" :key="item.id"
                :type="index == time_scope_active ? 'primary' : ''" @click="time_scope_click(index)">{{ item.name }}
            </el-button>
        </ul>
        <div class="reportType">
            <el-button v-for="(item, index) in reportType" :key="item.id"
                :type="index == report_type_active ? 'primary' : ''" @click="report_type_click(index)"
                :disabled="index == disableButton[0] || index == disableButton[1]">{{ item.name }}
            </el-button>
        </div>
        <div>
            <el-form ref="form" :model="unit" label-width="80px">
                <el-form-item label="单位">
                    <el-select v-model="unit.wanyaun" placeholder="元">
                        <el-option :label="item.name" :value="item.name" v-for="(item) in unitselece" :key="item.id"
                            @click.native="unit_click(item.name)">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    props: ['time_scope_active', 'report_type_active', 'disableButton'],

    name: '',
    components: {},
    data() {
        return {
            form: {
                region: ""
            },
            reportperiod: [{ //报告期
                name: "日报",
                id: "0"
            },
            {
                name: "周报",
                id: "1"
            }, {
                name: "月报",
                id: "2"
            }, {
                name: "季报",
                id: "3"
            }, {
                name: "半年报",
                id: "4"
            }, {
                name: "年报",
                id: "5"
            }],
            timeScope: [{ //时间范围
                name: "3M",
                id: "1"
            }, {
                name: "6M",
                id: "2"
            }, {
                name: "1Y",
                id: "3"
            }, {
                name: "3Y",
                id: "4"
            },],
            reportType: [{ //报表类型
                name: "原始报表",
                id: '1'
            }, {
                name: "销售百分比",
                id: '2'
            }, {
                name: "资产百分比",
                id: '3'
            }, {
                name: "同比增长比率",
                id: '4'
            },],
            // time_scope_active: 0,
            unit: {
                wanyaun: ''
            },
            unitselece: [{
                name: "元",
                id: '0'
            }, {
                name: "万元",
                id: '1'
            }, {
                name: "百万元",
                id: '2'
            }, {
                name: "千万元",
                id: '3'
            }]
        }
    },
    created() {

    },
    mounted() { },
    methods: {
        time_scope_click(index) {
            this.$emit('time_scope_click', index)
        },
        report_click(name) {
            // console.log(name)
            this.$emit('report_click', name)
        },
        report_type_click(index) {
            console.log(index)
            this.$emit('report_type_click', index)
        },
        unit_click(name) {
            this.$emit('unit_click', name)
        }
    }
}
</script>
<style scoped lang='scss'>
.tableHeader {
    .time-scope {
        margin-left: 20px;

        >div {
            padding: 8px 10px;
        }

        li {
            padding: 8px 10px;
            cursor: pointer;
            // box-shadow: 0 0 3px 0 #ccc;
            border: 1px solid #ccc;
            margin-left: 3px;
            border-radius: 5px;
        }

        .li-active {
            background-color: #39f;
            color: #fff;
            border: none;
        }
    }

    .reportType {
        margin-left: 40px;
    }

    .el-select {
        width: 200px;
    }

    .el-form-item {
        margin-bottom: 0;
    }
}
</style>
